#{extends 'main.html' /}

<script type="text/javascript">
	var domain = '#{if flash.residence}@&{flash.residence}#{/if}';
 	function sync() {
 		input=document.loginform.usernameV.value;
 		document.loginform.username.value = input + domain;
 	}
</script>


<div class="container" style="padding-top:70px">
<div class="row">
	<div class="span5">
		<div id="login">
		
			<h1>&{'secure.title'}</h1>
			
			<form name="loginform" action="@{Secure.authenticate()}" method="POST" class="well" onsubmit="sync()">			
				
				#{if flash.error}
					<div class="alert alert-error">
						&{flash.error}
				    </div>
				#{/if}
				#{if flash.success}
					<div class="alert alert-success">
						&{flash.success}
					</div>
				#{/if}
				
				
				<div class="control-group">
            		<label class="control-label" for="usernameV">&{'secure.username'}</label>
            				<input name="usernameV" id="usernameV" size="16" type="text" value="${flash.usernameV}"/>
                			<input name="username" id="username" size="16" type="hidden" value="${flash.username}"/>
                			<span class="add-on">#{if flash.residence}@&{flash.residence}#{/if}</span>
          		</div>
          
				
				
				<div class="control-group">
					<label class="control-label" for="password">&{'secure.password'}</label>
					<input type="password" name="password" id="password" value="" />
				</div>
				
				<button class="btn" type="submit">&{'secure.login'}</button>
			
			</form>
			
		</div>
	</div>
</div>
<footer class="footer"><p>&copy; M4F 2011 </p>
      </footer>
      
    </div> <!-- /container -->